<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>前端布局测试</title>
	<style>
		body {
			background: #efefef;
			padding: 0;
			padding: 0;
		}

		.container {
			width: 960px;
			margin: 0 auto;
			position: relative;
			height: 600px;
		}

		#box-a {
			position: absolute;
			height: 100%;
			width: 180px;
			background: red;
			right: 0;
		}

		#box-b {
			position: absolute;
			height: 100%;
			width: 600px;
			left: 180px;
			background: yellow;
		}

		#box-c {
			position: absolute;
			height: 100%;
			width: 180px;
			left: 0;
			background: blue;
		}

		#box-a1 {
			/*float: right;*/
			width: 180px;
			background: red;
			height: 100%;
			position: absolute;
		}

		#box-b1 {
			/*float: right;*/
			width: 600px;
			background: yellow;
			height: 100%;
			position: absolute;
			left: 180px;
		}

		#box-c1 {
			/*float: right;*/
			width: 180px;
			background: blue;
			height: 100%;
			position: absolute;
			right: 0;
		}
	</style>

	<script>

		console.log(typeof(a) == "undefined");

		// var a;
	</script>
</head>
<body>
	<!-- <div id="box-a">COLUMN A</div>
	<div id="box-b">COLUMN B</div>
	<div id="box-c">COLUMN C</div>

	<div style="clear:both"></div>

	<div id="box-a1">COLUMN A</div>
	<div id="box-b1">COLUMN B</div>
	<div id="box-c1">COLUMN C</div> -->

	<div class="container">
		<div id="box-a1">COLUMN A</div>
		<div id="box-b1">COLUMN B</div>
		<div id="box-c1">COLUMN C</div>
	</div>

	<div class="container">
		<div id="box-a">COLUMN A</div>
		<div id="box-b">COLUMN B</div>
		<div id="box-c">COLUMN C</div>
	</div>
</body>
</html>